<template>
  <div>
    <div class="flex justify-center h-[2rem]">
      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout=" prev, pager, next,sizes,total"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onUpdated } from "vue";

const props = defineProps({
  total: {
    // 总数
    type: Number,
    default: 0,
  },
  // page: {
  //   type: Number,
  //   default: 1,
  // },
  // pageSize: {
  //   type: Number,
  //   default: 10,
  // },
});

onUpdated(() => {
  total.value = props.total;
});

const total = ref(0);
const page = ref(1); //当前页
const pageSize = ref(10); //每页条数

const handleSizeChange = (val) => {
  pageSize.value = val;
  emit("getList", {
    page: page.value,
    pageSize: pageSize.value,
    size: pageSize.value,
  });
};
const handleCurrentChange = (val) => {
  page.value = val;
  emit("getList", {
    page: page.value,
    pageSize: pageSize.value,
    size: pageSize.value,
  });
};

const emit = defineEmits(["getList"]);
</script>

<style scoped lang="scss">
</style>